<template>
    <div class="app-container">
        <div class="appLeft">
            <el-input placeholder="请输入内容" v-model="dirName" size="small" style="width: 100px" class="appleftInfut">
                <el-button slot="append" icon="el-icon-search" @click="getDirTreeInfo(dirName)"></el-button>
            </el-input>
            <!-- <el-button type="primary" icon="el-icon-plus" class="appLeftBtn" @click="addAttachment"> -->
            <!-- </el-button> -->
            <el-tree :data="treeListData" show-checkbox node-key="id" default-expand-all :expand-on-click-node="false"
                 @node-click="handleNodeClick">
            </el-tree>
        </div>
        <div class="appRight">
            <div class="appRightTop">
                <span>字段</span>
                <el-button type="primary" @click="addAttachment">保存至标准集</el-button>

            </div>
            <div class="appRightBtn" v-if="queryParams.catalogueId">
                <el-button :type="item.type" v-for="item in chooseBtnList" :key="item.title"
                    @click="gotoClick(item.title)">{{ item.title }}</el-button>
            </div>
            <div class="appRightCont">
                <el-table :data="tableData" border show-header @selection-change="handleSelectionChange"
                    max-height="380" row-key="index" class="ant-table-body tbody" @cell-dblclick="celldblclick">
                    <el-table-column type="selection" width="55"> </el-table-column>
                    <el-table-column show-overflow-tooltip label="字段名" prop="serviceName" />
                    <el-table-column show-overflow-tooltip label="字段类型" prop="typeId" />
                    <el-table-column show-overflow-tooltip label="字段标识" prop="serviceType" />


                </el-table>
            </div>
        </div>
        <!-- 第一层弹框 -->
        <el-dialog title="新建" :visible.sync="dialogVisibleOne" width="30%" :before-close="handleClose">
            <ul class="dialogUl">
                <li v-for="(item, index) in chooseList" :key="index" @click="addchooseTWO(index)">
                    {{ item }}
                </li>
            </ul>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleOne = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisibleOne = false">确 定</el-button>
            </span>
        </el-dialog>
        <!-- 第二层弹框 -->
        <el-dialog :title="
          standardAggregateCatalogue.isAggregate == 0
            ? '选择标准集'
            : '新建标准集'
        " :visible.sync="dialogVisibleTwo" width="30%" :before-close="handleClose">
            <div v-if="standardAggregateCatalogue.isAggregate === 0">
                <el-input placeholder="请输入内容" v-model="dirName" size="small" style="width: 100px" class="appleftInfut">
                    <el-button slot="append" icon="el-icon-search" @click="getDirTreeInfo(dirName)"></el-button>
                </el-input>
                <el-tree :data="treeListData" show-checkbox node-key="id" default-expand-all
                    :expand-on-click-node="false"  @node-click="handleNodeClick">
                </el-tree>
            </div>
            <el-form ref="OtherForm" :model="OtherForm" label-width="100px" v-else>
                <el-form-item label="上级文件夹" prop="region" :rules="{
                  required: true,
                  message: '请选择上级文件夹',
                  trigger: 'change',
                }">
                    <el-select v-model="OtherForm.region" placeholder="请选择上级文件夹">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="标准集名称" prop="names" :rules="{
                  required: true,
                  message: '请输入标准集名称',
                  trigger: 'blur',
                }">
                    <el-input v-model="OtherForm.names"></el-input>
                    <span>中文、字母、数字、下划线，不允许其他特殊字符，最大长度50字符。</span>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('OtherForm', OtherForm.names)">提交</el-button>
                    <el-button @click="cancelTwo">关闭</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <!-- 第三层弹框 -->
        <el-dialog title="保存" :visible.sync="dialogVisibleThress" width="30%" :before-close="handleClose">
            <el-table :data="tableDataThress" highlight-current-row >
            <el-table-column show-overflow-tooltip label="字段名" prop="serviceName" />
            <el-table-column show-overflow-tooltip label="字段类型" prop="typeId" />
            <el-table-column show-overflow-tooltip label="字段标识" prop="serviceType" />
            <el-table-column show-overflow-tooltip label="业务含义" prop="yewuhanyi" >
                <template slot-scope="scope">
                        <el-input  size="small" v-model="scope.row.prop"></el-input>
               </template>
            </el-table-column>
            <el-table-column show-overflow-tooltip label="参考标准文件" prop="cankaowenjian" >
                <template slot-scope="scope">
                        <el-select v-model="scope.row.prop" placeholder="请选择参考标准文件">
                        <el-option label="区域一" value="shanghai"></el-option>
                        <el-option label="区域二" value="beijing"></el-option>
                    </el-select>
               </template>
            </el-table-column>
            </el-table>

            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisibleThress = false">取 消</el-button>
                <el-button type="primary" @click="handeleOK">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
  
<script>
export default {
    name: "productionStandard",
    components: {
    },
    data() {
        return {
            //左侧查询的内容
            dirName: "",
            //上传的网址
            // action:"",
            //设置请求头
            // headers:{"Content-Type":"multipart/form-data;charset=UTF-8"},
            //第一层loding是否显示
            dialogVisibleOne: false,
            //第二层loding是否显示
            dialogVisibleTwo: false,
            //第三层loding是否显示
            dialogVisibleThress: false,
            //新建标准的显示隐藏
            dialogVisible: false,
            dynamicTableDialog: false,
            //修改的弹框是否显示
            dialogVisibleChange: false,
            //导入的时候的弹框是否显示
            dialogVisibleImport: false,
            //新建文件夹的显示隐藏----默认显示
            folderShow: true,
            //选择的哪一个  0---文件夹  1----标准集
            // chooseVal: 0,
            //表格全部行数据
            tableData: [
                {
                    serviceName:'姓名',
                    typeId:'String',
                    serviceType:'employee_name',
                },
                {
                    serviceName:'姓名',
                    typeId:'String',
                    serviceType:'employee_name',
                },
            ],
            //弹窗三的表格数据
            tableDataThress:[
                {
                    serviceName:'姓名',
                    typeId:'String',
                    serviceType:'employee_name',
                    yewuhanyi:'',
                    cankaowenjian:'ssssss',
                }, 
            ],
            //当前表格列
            currentColumn: [],
            //当前左侧树的数据
            treeListData: [],
            //传给子页面的表格数据
            checkedColumnList: [],
            //新建文件夹参考标准文件回来的数据
            chooseDataList: [],
            //上传的文件列表
            fileList: [],
            //新建文件标准的数据
            dataObj: {},
            //提交的文件信息
            formData: {},
            OtherForm: {
                names: "",
                parentDirId: "",
            },
            //搜索条件
            queryParams: {
                catalogueId: "", // 标准集id
                standardId: "", //标准编号
                standardChName: "", //标准中文名
                standardName: "", //标准英文名
                page: -1,
                size: -1,
            },
            //新建文件夹/标准集的条件
            standardAggregateCatalogue: {
                catalogueName: "", //标准集名称
                isAggregate: 0, //是否为标准集 0否1是
                pid: "0", //父级id
            },
            //循环的一层loding
            chooseList: ["保存至现有标准集", "新建标准集"],
        };
    },
    watch: {
        //  'queryParams.current'(newNum,oldNum){
        //          console.log(newNum,oldNum);
        //  },
        deep: true, //true 深度监听
    },
    mounted() {
        //一进来先去请求左侧tree
        // this.getDirTreeInfo();
        //获取表头配置
        // this.getAllTableConfigInfo();
    },
    methods: {
        //新建标准
        addAttachment() {
            this.dialogVisibleOne = true;
        },
        //是否关闭第一层
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },
        //选择是否是新建文件夹、还是新建标准集
        addchooseTWO(val) {
            this.standardAggregateCatalogue.isAggregate = val;
            this.dialogVisibleOne = false;
            this.dialogVisibleTwo = true;
        },
        //第二层的取消返回第一层loding
        cancelTwo() {
            this.dialogVisibleOne = true;
            this.dialogVisibleTwo = false;
            if (this.standardAggregateCatalogue.isAggregate == 0) {
                // this.$refs.folderForm.clearValidate();
            } else {
                this.$refs.OtherForm.clearValidate();
            }
        },
        //第二层的提交
        submitForm(form, val) {
            this.$refs[form].validate((valid) => {
                if (valid) {
                    this.dialogVisibleTwo = false;
                    this.dialogVisibleThress = true;
                    this.$refs[form].resetFields();
                }
            });
        },
        //第三层的提交
        handeleOK() {
            this.dialogVisibleThress = false;
            // this.standardAggregateCatalogue.catalogueName = val;
            createDir(this.standardAggregateCatalogue)
                .then((response) => {
                    if (response.success) {
                        this.$modal.msgSuccess("新建成功");
                        //然后重新获取左侧的树
                        this.getDirTreeInfo();
                    }
                })
                .catch((err) => {
                    // this.$message.error(err.message);
                    console.log(err);
                });
        },
        //保存至标准集
        handleQuery() {
            if (this.queryParams.standardId == "") {
                delete this.queryParams.standardId;
            }
            if (this.queryParams.standardChName == "") {
                delete this.queryParams.standardChName;
            }
            if (this.queryParams.standardName == "") {
                delete this.queryParams.standardName;
            }
            queryStandard(this.queryParams)
                .then((res) => {
                    if (res.success) {
                        this.$modal.msgSuccess("查询成功！");
                        this.tableData = res.data;
                    }
                })
                .catch((err) => {
                    // this.$message.error(err.message);
                    console.log(err);
                });
        },
        //点击重置
        resetQuery() {
            this.queryParams.standardId = "";
            this.queryParams.standardChName = "";
            this.queryParams.standardName = "";
            this.queryParams.current = 1;
            this.$modal.msgSuccess("重置成功！");
        },
        //勾选change
        handleSelectionChange(val) {
            this.multipleSelection = val;
        },
        //实现双击复制时间
        celldblclick(row, column, cell, event) {
            if (event.type === "dblclick") {
                var rowType = column.property;
                var save = function (e) {
                    e.clipboardData.setData("text/plain", row[rowType]);
                    e.preventDefault(); //阻止默认行为
                };
                // 添加copy事件
                document.addEventListener("copy", save);
                //复制选中的文字到剪贴板;
                document.execCommand("copy");
                //移除addEventListener的事件
                document.removeEventListener("copy", save);
            }
            //复制成功后提示
            this.$message({
                message: "复制 " + row[rowType] + " 成功",
                type: "success",
            });
        },
        //新建
        addStandar() {
            this.dialogVisible = true;
        },
        //获取左侧Tree
        getDirTreeInfo(val) {
            let queryDirTreeInfo = {
                dirName: val,
            };
            // getDirTree(queryDirTreeInfo)
            //     .then((response) => {
            //         this.treeListData = JSON.parse(JSON.stringify(response.data));
            //         //再去获取动态表头 然后对比
            //         this.getTableTou();
            //     })
            //     .catch((err) => {
            //         // this.$message.error(err.message);
            //         console.log(err);
            //     });
        },
        //关闭配置表头弹框
        closeDynamicTable(arr) {
            this.dynamicTableDialog = false;
            if (arr) {
                this.currentColumn = arr;
            }
        },
        //编辑
        editRow(row, index) {
            this.dataObj = { flag: "edit", row, index };
            this.dialogVisible = true;
        },

        //树的节点被点击的时候
        handleNodeClick(data) {
            console.log(data, "被点击le");
            this.queryParams.catalogueId = data.id;
            this.handleQuery();
        },
        //是否要关闭更改标准集
        handleCloseChange(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => { });
        },
        //更改标准集
        submitChange() {
            this.dialogVisibleChange = false;
            updateDir(this.standardAggregateCatalogue)
                .then((response) => {
                    if (response.success) {
                        this.$modal.msgSuccess("修改成功");
                        //重新获取左侧树
                        this.getDirTreeInfo();
                    }
                })
                .catch((err) => {
                    console.log(err);
                });
        },
    },
};
</script>
<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/variables.scss";

.app-container {
    font-family: "PingFang SC", "microsoft yahei";
    background: #fff;
    height: 755px;
}

.appLeft {
    float: left;
    width: 300px;
    height: 100%;
    padding: 20px;
    border-right: 1px solid #ccc;
}

.appleftInfut {
    width: 200px !important;
}

.appLeftBtn {
    width: 35px;
    height: 30px;
    padding: 0 5px;
    margin-left: 10px;
}

.el-tree {
    margin-top: 30px;
}

::v-deep .el-tree .el-button--mini.is-circle {
    padding: 0px;
}

::v-deep .el-tree .el-button.is-circle {
    border: none;
}

.dialogUl {
    height: 200px;
    list-style: none;
    text-align: center;

    li {
        width: 200px;
        height: 200px;
        float: left;
        border: 1px dashed #ccc;
        margin-left: 15px;
    }
}

.appRight {
    float: left;
    width: calc(100% - 300px);
    height: 100%;
}

.appRightTop {
    padding: 20px;

    .gotoseach {
        font-size: 15px;
    }
}

.appRightBtn {
    padding: 0 50px;
}

.appRightCont {
    padding: 50px 150px 0 50px;
}
</style>
  